<template>
  <div>
    <div><input type="text" v-model="firstName"></div>
    <div><input type="text" v-model="lastName"></div>
    <div>{{ fullName }}</div>
    <div>{{ couldSetFullName }} <button @click="chanageFullName">chanageFullName</button></div>
  </div>
</template>

<script lang="ts" setup>
import { computed, ref } from 'vue';


let firstName = ref('张')
let lastName = ref('三')

let fullName = computed(() => {  // 只读的计算属性computed
  return `${firstName.value}-${lastName.value}`
})

let couldSetFullName = computed({  // 可写的计算属性computed
  get() {
    return `${firstName.value}-${lastName.value}`
  },
  set(val) {
    if (!val) return
    let [str1, str2] = val.split('-')
    firstName.value = str1
    lastName.value = str2
  }
})
function chanageFullName() {
  couldSetFullName.value = 'li-si'
}

defineOptions({
  name: "01computed"  // 定义组件名
})
</script>

<style lang="scss" scoped>

</style>
